<template>
  <el-row>
    <el-col :span="3"></el-col>
    <el-col :span="7">
      <div id="user-increment" class="chart"></div>
    </el-col>
    <el-col :span="7">
      <div id="comment-increment" class="chart"></div>
    </el-col>
    <el-col :span="7">
      <div id="post-increment" class="chart"></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="3"></el-col>
    <el-col :span="7">
      <div id="gender-detail" class="chart"></div>
    </el-col>
    <el-col :span="7">
      <div id="user-area-detail" class="chart"></div>
    </el-col>
    <el-col :span="7">
      <div id="guest-area-detail" class="chart"></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="10"></el-col>
    <el-col :span="14">
      <div id="pv-increment" class="chart"></div>
    </el-col>
  </el-row>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { dashboard } from "../../api/adminAPI";
import { dayjs } from "element-plus";

const { echarts } = getCurrentInstance().appContext.config.globalProperties;

const dataMapper = (data, fill) => {
  const keys = Object.keys(data);
  if (fill) {
    var startTime = dayjs().startOf("week").add(1, "day");
    const endTime = dayjs().endOf("week").add(1, "day");
    while (startTime.isBefore(endTime)) {
      startTime = startTime.add(1, "day");
      const t = startTime.format("MM-DD");
      if (!keys.includes(t)) {
        data[t] = 0;
      }
    }
  }
  const res = Object.keys(data)
    .sort((a, b) => {
      const asp = a.split("-");
      const bsp = b.split("-");
      // 先比较月份
      if (asp[0] > bsp[0]) return 1;
      else if (asp[0] == bsp[0]) {
        if (asp[1] > bsp[1]) return 1;
        else if (asp[1] == bsp[1]) return 0;
        else return -1;
      } else return -1;
    })
    .map((it) => {
      return { name: it === "-" ? "未知" : it, value: data[it] || 0 };
    });
  return res;
};

dashboard().then(({ data }) => {
  showBarChart(
    "user-increment",
    "新增用户数量",
    dataMapper(data.userIncrement, true)
  );
  showBarChart(
    "comment-increment",
    "新增评论数量",
    dataMapper(data.commentIncrement, true),
    "个"
  );
  showBarChart(
    "post-increment",
    "新增帖子数量",
    dataMapper(data.postIncrement, true),
    "个"
  );
  showPieChart(
    "gender-detail",
    "会员性别占比",
    dataMapper(data.userGenderCount)
  );
  showPieChart(
    "user-area-detail",
    "会员地区占比",
    dataMapper(data.userAreaCount)
  );
  showPieChart(
    "guest-area-detail",
    "游客地区占比",
    dataMapper(data.guestAreaCount)
  );
});

const showBarChart = (domId, name, data, unit) => {
  var chartDom = document.getElementById(domId);
  var myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: name + "图",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: data.map((it) => it.name),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name,
        data,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        tooltip: {
          valueFormatter: (value) => value + " " + (unit || "人"),
        },
      },
    ],
  };
  option && myChart.setOption(option);
};

const showPieChart = (domId, name, data) => {
  var chartDom = document.getElementById(domId);
  var myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: name + "图",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name,
        type: "pie",
        radius: "50%",
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        tooltip: {
          valueFormatter: (value) => value + " 人",
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
</script>

<style scoped>
.chart {
  width: 300px;
  height: 250px;
}
</style>
